<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 网页的标题 -->
    <title>中国电信</title>
</head>
<!-- 网页的主体 -->
<body>
<center>
    <div class="center_div">
        <!-- 元素居中 -->
        <!--
         div盒子标签
            width：宽
            height：高
            background-color：背景色
            border-radius:边框圆角
            border：边框（颜色 细线 实线）
            padding-top 上边距
        -->
        <div id="out">
            <!-- 表单标签 -->
            <form>
                <!-- h3:标题标签 -->
                <h3>用户注册</h3>
                <!-- 表格标签 -->
                <table>
                    <!-- 表格的行 -->
                    <tr>
                        <!--
                            td：表格
                              align：水平方向 left right center
                        -->
                        <td class="td_class">用户名：</td>
                        <!--
                            input:文本框
                                type="text"  文本框
                                type="password" 密码框
                                type="radio" 单选框
                                type="checkbox" 多选框
                                type="submit" 提交按钮
                                type="file" 文件域
                                type="image" 图片按钮
                                type="email" 邮箱框
                                type="url" 网址框
                                type="number" 数字框
                                type="range" 滑块
                                placeholder 文本框的提示内容设置
                                required 非空
                            select:下拉框
                            textarea:多行文本域
                        -->
                        <td class="ft_large">
                            <label>
                                <input type="text" class="textinput" required placeholder="用户名"
                                />
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">密码：</td>
                        <td class="ft_large">
                            <label>
                                <input type="password" class="textinput" required placeholder="密码"
                                />
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">确认密码：</td>
                        <td class="ft_large">
                            <label>
                                <input type="password" class="textinput" required placeholder="确认密码"
                                />
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">年龄：</td>
                        <td class="ft_large">
                            <label>
                                <input type="number" class="textinput" required placeholder="年龄"
                                />
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">性别：</td>
                        <td class="ft_large">
                            <!--
                                checked默认选中
                                多个单选框，做到互斥，需要一个 相同的 name="sex"
                            -->
                            <label>
                                <input name="sex" type="radio" checked/>
                            </label>男 &nbsp;&nbsp;
                            <label>
                                <input name="sex" type="radio"/>
                            </label>女
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">爱好：</td>
                        <td class="ft_large">
                            <label>
                                <input type="checkbox" checked/>
                            </label>游泳
                            <label>
                                <input type="checkbox"/>
                            </label>读书
                            <label>
                                <input type="checkbox"/>
                            </label>画画
                            <label>
                                <input type="checkbox"/>
                            </label>躺平
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">籍贯：</td>
                        <td class="ft_large">
                            <label>
                                <select>
                                    <option>北京</option>
                                    <option>上海</option>
                                    <option selected>新疆</option>
                                </select>
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">邮箱：</td>
                        <td class="ft_large">
                            <label>
                                <input type="email" class="textinput"/>
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">上传证件：</td>
                        <td class="ft_large">
                            <input type="file" id="large_input"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">企业网站：</td>
                        <td class="ft_large">
                            <label>
                                <input type="url" class="textinput"/>
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">工作经历：</td>
                        <td class="ft_large">
                            <!-- 多行文本框 cols：一行有多行列   rows：总共有几行 -->
                            <label>
                                <textarea cols="15" rows="4" class="textinput"></textarea>
                            </label>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td class="td_class">验证：</td>
                        <td class="ft_large">
                            <label>
                                <input type="range" class="textinput"/>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="image" value="go" class="no_doshed_input" src="提交.png"/>
                        </td>
                    </tr>
                </table>
            </form>
            <a href="">测试超链接</a>
        </div>
    </div>
</center>
</body>

<style>
    .center_div {
        width: 45%;
        text-align: center;
    }

    form {
        background: #45eff2;
        border-radius: 15px;
    }

    #large_input {
        width: 280px;
        font-size: large;
    }

    form input {
        border: 2px dashed black;
        border-radius: 6px;
    }

    form table tr td input.no_doshed_input {
        border: none;
        width: 45px;
    }

    .textinput {
        width: 100%;
    }

    tr td label select {
        font-size: larger;
        width: 90%;
        height: 20%;
    }

    #out {
        width: 75%;
        height: 100%;
        border-radius: 15px;
        border: 3px black solid;
        padding-top: 5px;
        background: #45EFF2FF;
    }

    .td_class {
        text-align: center;
        font-size: large;
        color: #a249c3;
    }

    .ft_large {
        font-size: larger;
        text-align: left;
        width: 60%;
    }

    .hgbt {
        font-size: 150%;
    }

    textarea {
        width: 60%;
        height: auto;
    }

    h3 {
        color: #c900ff;
    }

    select {
        width: 300px;
    }

    a {
        font-size: larger;
        cursor: wait;
    }

    a:hover {
        color: #c900ff;
    }

    a:active {
        color: deeppink;
    }


</style>
</html>